//
// combo.js
// Shows a combo javascript box for some input elements.
//
//
// 
// To create a combo just add the attribute combo="Value1; Value2; Value3"
//
// To style the combo, just create your own css for: 
//    div.dddcombo and div.ddd_combo_item
//
function ddd_combo() {
  $("input[type=text][combo]").each(function() {
    var combo           = $(this).attr("combo").split(";");
  
    // Generating the combo html
    var combo_html      = ""
    for (var i = 0; i < combo.length; i++) {
      combo_html += "<div class='ddd_combo_item'>" + 
                    combo[i] + 
                    "</div>";
    }

    var element_id      = $(this).attr("id");
    var element_offset  = $(this).offset();
    var element_width   = $(this).width();
    var element_height  = $(this).height();
    var div_combo_id    = 'div_combo_' + element_id;
    
    // mouseover
    $(this).focusin(function() {
      // Adds the div with info if not already present.
      if ($("#" + div_combo_id).length == 0) {
        $(this).after("<div style='cursor: pointer; position: absolute;" +
                      "display: none;' id='" + 
                      div_combo_id + "' > " + 
                      combo_html + 
                      "</div>");
      }

      // Positions the div
      $("#" + div_combo_id).css({
        "left": (element_offset.left) + "px",
        "top": (element_offset.top + element_height) + "px"
      });

      // Adds the css class to be used.
      $("#" + div_combo_id).addClass("dddcombo");
      $("#" + div_combo_id).show("slow");

      // Adds the event to each div inside the div_combo_id
      $("div#" + div_combo_id + " div").click(function(event) {
        $("#" + element_id).val($(this).text());
        $("#" + div_combo_id).remove();
      });

      // Bind mouseout event on the input to hide de div_combo_box
      // some time later. We set it to 8 secs. Seems to be enough to
      // most cases.
      $("#" + element_id).blur(function(evt) {
        setTimeout(function() { $("#" + div_combo_id).remove(); }, 5000);
      });

    });

  });
}



